<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ic="http://ivyteam.ch/jsf/component"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:pm="http://primefaces.org/mobile">

<h:head>
	<title>Taskboard</title>
	<style>
		#dashboard {
			margin-top: 10px;
			height: 500px;
			width: 100%;
		}
		#dashboard table, #kanban .ui-datatable {
			height: 100%;
			width: 100%;
		}
		#dashboard table th {
			widht: 25%;
			height: 40px;
		}
		#dashboard table td {
			min-height: 300px;
			width: 25%;
			vertical-align: top;
		}
		
		.logoutWrapper {
			float: right;
		}
		input.ui-inputfield 
		{ 
			width : 100% !important;
		}
		
		.public-button {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
			font-size: 13px !important;
			vertical-align: top;
			border: 1px solid #a2a2a2 !important;
			color: #FFFFFF !important;
			cursor: pointer;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			position: relative;
			background: red!important;
			background-image: none !important;
		}
		.public-button:hover {
			background: #e5e5e5 !important;
			color:red !important;
			transition: background 0.05s linear;
		}
		.public-button:active {
			background: -webkit-linear-gradient(#e5e5e5, #fff);
			background: -moz-linear-gradient(#e5e5e5, #fff);
			background: -ms-linear-gradient(#e5e5e5, #fff);
			background: -o-linear-gradient(#e5e5e5, #fff);
			background: linear-gradient(#e5e5e5, #fff);
			-pie-background: linear-gradient(#e5e5e5, #fff);
		}
		
		body { background: #121212 !important; }
		.inputtext {
			color: #515348 !important;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
			border: 1px solid #aaa !important;
			padding: 7px !important;
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
			font-size: 13px !important;
			border-radius: 3px !important;
			background-color: #FFFFFF !important;
			background-image: none !important;
		}
			
		textarea,input{
			margin-top: 10px;
			width:100%;
		}
		
		.float-right-inline{
			display: inline-block;
			float: right;
		}
		
		.inline-25{
			margin-top: 10px;
			display: inline-block;
			width: 25%;
		}
		.inline-75{
			margin-top: 10px;
			display: inline-block;
			width: 75%;
		}
		table th {
   			background: #FFFFFF !important;
   			color: #000000
		}
	</style>
</h:head>
<h:body>
	<p:outputPanel styleClass="logoutWrapper">
		<h:form>
			<p:commandButton actionListener="#{logic.onLogoutClick}" value="Logout" styleClass="public-button" rendered="false"> </p:commandButton>
		</h:form>
	</p:outputPanel>
	<ic:component.NewTaskForm startMethod="start" id="newTaskComponent"/>
		<p:outputPanel layout="block" styleClass="ui-datatable" id="dashboard">
            <table>
            	<thead>
            		<tr>
            			<th class="ui-state-default">READY</th>
            			<th class="ui-state-default">WORK</th>
            			<th class="ui-state-default">REVIEW</th>
            			<th class="ui-state-default">DONE</th>
            		</tr>
            	</thead> 
	            <tbody>
	            	<tr>
	            		<td>
	            			<ui:repeat var="task" value="#{data.taskList}" >
	            				<h:panelGroup rendered="#{task.status eq 'ready'}">
	            					<ic:component.TaskPanel startMethod="start" task="#{task}"/>
            					</h:panelGroup>
	            			</ui:repeat>            			
	            		</td>
	            		<td>	
	            			<ui:repeat var="task" value="#{data.taskList}">
            					<h:panelGroup rendered="#{task.status eq 'work'}">
	            					<ic:component.TaskPanel startMethod="start" task="#{task}"/>
            					</h:panelGroup>
	            			</ui:repeat>                			
	            		</td>
	            		<td>	            		
	            		</td>
	            		<td>
	            		</td>
	            	</tr>
	            </tbody>
            </table>
         </p:outputPanel>
	<h:form id="kanban" prependId="false">
         <p:remoteCommand name="reloadData" actionListener="#{logic.refresh}" update=":dashboard" />
         <pe:remoteCommand id="loadData" name="loadData" oncomplete="dlg2.show()" actionListener="#{logic.getEditTask}" update=":modalDialog">
		    <pe:assignableParam name="id" assignTo="#{data.taskSeletedID}"/>
		</pe:remoteCommand>
	</h:form>   	
	<p:dialog width="500" id="modalDialog" header="Task ID: ##{data.taskSelected.id}" widgetVar="dlg2" modal="true">  
    	<h:form>
    		<p:outputLabel value="#{data.taskSelected.id}"></p:outputLabel>        
    		<p:outputLabel value="Created by: #{data.taskSelected.createdBy}" styleClass="float-right-inline"></p:outputLabel>
			<h:panelGrid columns="2" width="100%">
				<h:panelGroup style="text-align:right"  layout="block">
				</h:panelGroup>
			</h:panelGrid>
			<h:panelGroup id="titlelabel" layout="block">
				<h:outputLabel value="Title" />
			</h:panelGroup>
			<h:panelGroup id="title" layout="block">
				<p:inputText name="txtTitle" id="txtTitle" value="#{data.taskSelected.title}"
					style="width:100%" styleClass="inputtext"></p:inputText>
			</h:panelGroup>
			<h:panelGroup id="titleDesc" layout="block">
				<h:outputLabel value="Description" />
			</h:panelGroup>
			<h:panelGroup id="Desc" layout="block">
				<p:inputTextarea name="txtDesc" id="txtDesc" rows="5" autoResize="false"
					value="#{data.taskSelected.description}" style="width:100%" styleClass="inputtext"/>
			</h:panelGroup>
			<h:panelGroup id="titleAssigned" layout="block">
				<p:row>
					<p:column>
						<h:outputLabel value="Assignee" styleClass="inline-25"/>
						<p:autoComplete name="txtAssigned" id="txtAssigned" value="#{data.taskSelected.assigned}"   
		                    completeMethod="#{logic.loadAutocomplete}"  forceSelection="true" styleClass="inline-75" >  
		                </p:autoComplete>
					</p:column>
				</p:row>
			</h:panelGroup>
			<h:panelGrid columns="2" width="100%">
				<h:panelGroup style="text-align:right" id="button" layout="block">

					<p:commandButton value="History" styleClass="public-button" name="btnHistory" id="btnHistory" onclick="loadHistory(#{data.taskSelected.id});" oncomplete="dlg3.show()" update=":historyDialog"></p:commandButton>
					<p:commandButton value="Save" styleClass="public-button"  name="btnSave" id="btnSave" actionListener="#{logic.saveEditTask}" update=":dashboard" oncomplete="dlg2.hide()" ></p:commandButton>

				</h:panelGroup>
			</h:panelGrid>			
	</h:form>
		<p:ajax event="close" update=":modalDialog,kanban" oncomplete="dlg3.hide()"/>		
	</p:dialog> 
	
	<p:dialog id="historyDialog" header="History Task: ##{data.taskSelected.id}" widgetVar="dlg3">
		<ic:component.HistoryView startMethod="start"></ic:component.HistoryView>
	</p:dialog>
	
	<p:dialog id="logWorkDialog" header="Log Work Task  ##{data.taskSelected.id}" widgetVar="dlg4">
		<ic:component.LogWork startMethod="start"></ic:component.LogWork>
	</p:dialog>

</h:body>
</html>